<template>
  <div class="city-selector">
    <div class="selector-header">
      <span class="city-label">城市和区域</span>
    </div>
    <div class="city-list">
      <span
        v-for="city in cities"
        :key="city"
        :class="{ active: city === selectedCity }"
        @click="selectCity(city)"
      >
        {{ city }}
      </span>
    </div>
    <div class="district-list" v-if="selectedCity">
      <span
        v-for="district in districts[selectedCity] || []"
        :key="district"
        :class="{ active: district === selectedDistrict }"
        @click="selectDistrict(district)"
      >
        {{ district }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const cities = [
  '全国',
  '北京',
  '上海',
  '广州',
  '深圳',
  '杭州',
  '天津',
  '西安',
  '苏州',
  '武汉',
  '厦门',
  '长沙',
  '成都',
  '郑州',
  '重庆',
  '其它城市'
]
const districts = {
  广州: [
    '不限',
    '荔湾区',
    '白云区',
    '天河区',
    '越秀区',
    '海珠区',
    '增城区',
    '从化区',
    '花都区',
    '南沙区',
    '黄埔区',
    '番禺区'
  ]
  // Add districts for other cities here
}

const selectedCity = ref('广州')
const selectedDistrict = ref('')

const selectCity = (city) => {
  selectedCity.value = city
  selectedDistrict.value = ''
}

const selectDistrict = (district) => {
  selectedDistrict.value = district
}
</script>

<style scoped>
.city-selector {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 15px;
  margin-top: 15px;
}

.selector-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.city-label {
  font-weight: bold;
  color: #666;
}

.city-list,
.district-list {
  display: flex;
  flex-wrap: wrap;
  gap: 21px;
  margin-bottom: 10px;
}

.city-list span,
.district-list span {
  cursor: pointer;
  font-size: 14px;
  color: #666;
}

.active {
  color: #409eff;
}
</style>
